<jsp:directive.page contentType="text/html;charset=UTF-8" />

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:#userList"
                              data-toggle="tab">用户列表</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="userList">
            <div class="panel-group" role="tablist" style="margin-bottom: 0px;">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="collapseListGroupHeading1" style="padding-top: 5px;padding-bottom: 5px;">
                        <table style="width: 100%; height: 100%">
                            <tr>
                                <td width="30%" align="left">
                                    <!-- a href="#/jobAdd" class="btn btn-primary" style="padding-right: 10px;">添加作业</a -->
                                    <a href="javascript:void(0);" class="btn btn-primary" style="padding-right: 10px;" data-ng-click="openAddDialog()">添加用户</a>
                                </td>
                                <td align="center">
                                    <h4 class="panel-title">Data List</h4>
                                </td>
                                <td width="30%" align="right">
                                    <button type="button" class="btn btn-primary btn-sm" data-ng-click="userQuery()">查询</button>
                                    <a
                                            class="collapsed btn btn-success btn-sm" title="显示/隐藏查询条件"
                                            role="button" data-toggle="collapse"
                                            href="javascript:#collapseListGroup1" aria-expanded="false"
                                            aria-controls="collapseListGroup1">
                                        <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
                                    </a></td>
                            </tr>
                        </table>
                    </div>
                    <div id="collapseListGroup1" class="panel-collapse collapse in"
                         role="tabpanel" aria-labelledby="collapseListGroupHeading1"
                         aria-expanded="true" style="height: 40px;">
                        <ul class="list-group">
                            <li class="list-group-item"
                                style="padding-top: 5px; padding-bottom: 5px;">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-addon" style="color:white;background-color: #3c763d;font-weight: bold;">全文检索</span>
                                            <input type="text" class="form-control"  data-ng-model="$root.keyword" placeholder="请输入关键字">
                                            <span class="input-group-btn">
												<button class="btn btn-warning" type="button" data-ng-click="$root.keyword=''">清除</button>
											</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-addon">用户名</span>
                                            <input type="text" class="form-control"  data-ng-model="queryParam.username">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-addon">状态</span>
                                            <select class="form-control" data-ng-model="queryParam.disabled">
                                                <option value="">所有</option>
                                                <option value="true">已停用</option>
                                                <option value="false">启用中</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <table class="table table-hover table-striped table-bordered"
                   border="1" style="width: 100%">
                <thead>
                <tr>
                    <td align="center" width="10px">No.</td>
                    <td align="center" width="80px">编辑</td>
                    <td align="center" width="80px">启用</td>
                    <td align="center" width="80px">禁用</td>
                    <td width="200px">用户名</td>
                    <td>备注</td>
                    <td width="80px">状态</td>
                    <td width="80px">管理员</td>
                    <td width="200px">创建时间</td>
                    <td width="200px">最后修改时间</td>
                </tr>
                </thead>
                <tbody>
                <tr data-ng-repeat="item in userpager.items | filter:$root.keyword">
                    <td align="center" data-ng-bind="$index + 1"></td>
                    <!-- td style=""><a data-ng-show="item.jobStatus == 'STOP' || item.jobStatus == 'INIT'"
                        href="#/jobAdd/{{item.jobId.jobId}}">编辑</a></td -->
                    <td align="center">
                        <a href="javascript:void(0);" data-ng-click="openUpdateDialog(item.username)">编辑</a><br>
                        <a href="javascript:void(0);" data-ng-click="openPwdDialog(item.username)">修改密码</a>
                    </td>
                    <td align="center"><a data-ng-show="item.disabled"
                                          href="javascript:void(0);" data-ng-click="enableUser(item.username)">启用</a></td>
                    <td align="center"><a data-ng-show="!item.disabled"
                                          href="javascript:void(0);" data-ng-click="disableUser(item.username)">禁用</a></td>
                    <td data-ng-bind="item.username"></td>
                    <td data-ng-bind="item.remark"></td>
                    <td data-ng-bind="item.disabled ? '已禁用' : '启用中'"></td>
                    <td align="center" data-ng-bind="item.admin ? '是' : '否'"></td>
                    <td data-ng-bind="item.addTime | date :'yyyy-MM-dd HH:mm:ss'"></td>
                    <td data-ng-bind="item.updateTime | date :'yyyy-MM-dd HH:mm:ss'"></td>
                </tr>
                </tbody>
            </table>
            <pager pager-item="userpager" />
        </div>

    </div>
</div>

<div class="modal fade" id="userDetail" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">Detail</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" id="recipient-name"
                               readonly="readonly" width="100%">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">Message:</label>
                        <textarea class="form-control" id="message-text" rows="15"
                                  readonly="readonly"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
